<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{ title }} - The ONE 智能钢琴教室</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">	
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no,email=no">
	<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/mobile.css') }}">
    <style>
        a{ text-decoration:none}
    </style>
</head>
<body>
<div style="display:none;">
    <img src="{{ url_for('static', filename='images/wx_logo.jpg') }}" />
</div>
	{% block header %}
	<header class="m-nav-top">
		<div class="top">
			<i class="iconfont icon-arrow-left" style="font-size:24px;"></i>
			<span class="title" onclick="WeixinJSBridge.call('closeWindow');">{{ title }}</span>
			<i class="iconfont icon-list"></i>
		</div>
		<ul class="nav">
			<li class="list">
				<i class="iconfont icon-record"></i>
				<a href="{{ url_for('wechat.record') }}">
					<span class="name">学习记录</span>
				</a>
			</li>
			<li class="list">
				<i class="iconfont icon-user"></i>
				<a href="{{ url_for('wechat.userinfo') }}">
					<span class="name">账号信息</span>
				</a>
			</li>
			<li class="list">
				<i class="iconfont icon-write"></i>
				<a href="{{ url_for('wechat.feedback') }}">
				<span class="name">意见反馈</span>
				</a>
			</li>
			<li class="list layout">
				<i class="iconfont icon-logout"></i>
				<a href="{{ url_for('wechat.logout') }}">
				<span class="name">退出登录</span>
				</a>
			</li>
		</ul>
	</header>
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
		<div class="alert-error {{ category }}">
			<div class="message">{{ message }}</div>
		</div>
		{% endfor %}
    {% endif %}
    {% endwith %}

	{% endblock %}
	{% block contents %}
	{% endblock %}
	<script src="{{ url_for('static', filename='libs/jquery.min.js') }}"></script>
	<script src="{{ url_for('static', filename='libs/vconsole.min.js') }}"></script>
	{% block js_assets %}
	<script type="text/javascript">
		$(function(){
			// if(!document.referrer){
			// 	$('.icon-arrow-left').hide();
			// }
			$('.icon-list').bind('click',function(){
				var nav=$('.nav');
				if(nav.css('top')==='-80px'){
					nav.animate({top:'48px'},300,'swing');
				}
				else{
					nav.animate({top:'-80px'},300,'swing');
				}		
			});

			$('.icon-arrow-left').bind('click',function(){
				window.history.back();
			});

			if( $('.alert-error .message').length > 0){
				$('.alert-error .message').animate({opacity:1},200);
				setTimeout(function(){
					$('.alert-error .message').animate({opacity:0},300);
				},1600);
			}

			$('.icon-share').bind('click',function(){
				var u=navigator.userAgent;
				if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
					$('.m-mask img').attr('src','/static/images/fenxiang-ios.png');
				}
				$('.m-mask').show();
			});
			$('.m-mask').bind('click',function(){
				$('.m-mask').hide();
			});

			$('.layout').bind('click', function() {
				sessionStorage.removeItem('course_map')
			})
		});
	</script>
	{% endblock %}
</body>
</html>
